<template>
  <div class="pagination-container">
    <div class="code-pagination anvil-code-pagination">
      <span>共{{ total }}条</span>
      <span>{{ page }}/{{ totalPage }}</span>
      <span class="jump-link" @click="handleToFirst">{{ firstPageText }}</span>
      <span class="jump-link" @click="handleToPrev">{{ prevPageText }}</span>
      <span class="jump-link" @click="handleToNext">{{ nextPageText }}</span>
      <span class="jump-link" @click="handleToLast">{{ lastPageText }}</span>
      <div style="display: flex; align-items: center"
      >每页
        <el-select class="anvil-code-select" v-model="pageSize" style="width: 60px">
          <el-option v-for="size in pageSizes" :label="size" :value="size" :key="size" />
        </el-select>
      </div>
      <div style="display: flex; align-items: center">
        跳至
        <el-input-number class="anvil-code-input" v-model="pageJump" style="width: 60px" :controls="false" />页
      </div>

      <el-button class="anvil-code-custom-button" @click="handlePageJump">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      pageSize: 10,
      pageJump: 1,
      firstPageText: '首页',
      prevPageText: '上一页',
      nextPageText: '下一页',
      lastPageText: '末页',
      pageSizes: [10, 20, 30, 50]
    }
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  watch: {
    limit: {
      handler(val) {
        this.pageSize = val
      },
      immediate: true
    },
    pageSize(val) {
      if (this.page > this.totalPage) {
        this.emitPagination(this.totalPage, val)
      } else {
        this.emitPagination(this.page, val)
      }
    }
  },
  methods: {
    emitPagination(page, limit) {
      this.$emit('update:page', page)
      this.$emit('update:limit', limit)
      this.$emit('pagination', {
        page,
        limit
      })
    },
    handleToFirst() {
      this.emitPagination(1, this.pageSize)
    },
    handleToLast() {
      this.emitPagination(this.totalPage, this.pageSize)
    },
    handleToPrev() {
      if (this.page > 1) {
        this.emitPagination(this.page - 1, this.pageSize)
      }
    },
    handleToNext() {
      if (this.page < this.totalPage) {
        this.emitPagination(this.page + 1, this.pageSize)
      }
    },
    handlePageJump() {
      if (this.pageJump > 0 && this.pageJump < this.totalPage + 1) {
        this.emitPagination(this.pageJump, this.pageSize)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  width: 100%;
  height: 40px;
  position: relative;
  padding: 5px;

  .code-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    float: right;
  }
  .jump-link {
    cursor: pointer;
    color: #0049b4;

    &:hover {
      color: #dd0000;
      text-decoration: underline;
    }
  }
}
</style>
